<template>
  <div class="loginView">
    <!-- 背景 -->
    <div class="backImg"></div>
    <div class="content">
      <el-form class="formDiv" ref="form" label-position="right" :model="form" label-width="80px">
        <el-form-item label="手机号:">
          <el-input @keyup.enter="onSubmit()" v-model="form.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input @keyup.enter="onSubmit()" show-password v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="loginBtn" :loading="loading" type="primary" @click="onSubmit()">登陆</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
  data() {
    return {
      form:{
        mobile:'',//手机号
        password:'',//密码
      },
      loading:false,//登录按钮loading
    }
  },
  components: {

  },
  created(){

  },
  methods:{
    /**
     * 点击登陆
     */
    onSubmit(){
      this.loading = true
      this.$store.dispatch('user/login', this.form).then(() => {
        this.$router.push({ path: '/index' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/styles/common.scss';
.loginView{
  // --el-text-color-regular:red;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  .backImg{
    width: 100%;
    height: 100vh;
    min-width: 1920px;
    background: $loginBackground no-repeat;
    background-size: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
  }
  .content {
    background-position: center top;
    background-size: cover;
    z-index: 1;
    overflow: hidden;
    position: relative;
    padding: 30px;
  }
  .content::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255,255,255,0.8);
      z-index: -1;
      background-image: $loginBackground;
      background-position: center top;
      background-size: cover;
      background-attachment: fixed;
      -webkit-filter: blur(10px);
      -moz-filter: blur(10px);
      -ms-filter: blur(10px);
      -o-filter: blur(10px);
      filter: blur(10px);
  }
  .formDiv{
    width: 400px;
  }
  .loginBtn{
    width: 100%;
  }
  :deep(.el-form-item__label){
    color: white;
    font-weight: bold;
  } 
}
</style>
